<template>
  <div class="app-container">
    <header>
      <div>
        <el-tabs v-model="tabsVal" type="card" @tab-click="handleTabs">
          <el-tab-pane label="学车流程节点" name="0"></el-tab-pane>
          <el-tab-pane label="预警信息节点" name="1"></el-tab-pane>
          <el-tab-pane label="自定义节点" name="2"></el-tab-pane>
        </el-tabs>
      </div>
    </header>

    <main>
      <div>
        <div class="radio_button mb-2">
          <el-radio-group v-model="radio" @input="changeRadio">
            <el-radio-button label="全部节点"></el-radio-button>
            <el-radio-button label="启用节点"></el-radio-button>
          </el-radio-group>
        </div>
        <div style="height: 625px;">
          <el-table :data="tableData" stripe border height="100%">
            <el-table-column prop="line" label="序号" width="80" align="center" />
            <el-table-column prop="nodeID" label="节点ID" width="80" align="center" />
            <el-table-column prop="name" label="节点名称" width="180" align="center" />
            <el-table-column prop="delayTime" label="开始跟进时间" width="180" align="center">
              <template slot-scope="scope">
                <div>
                  <span>{{ scope.row.delayTime }}</span>
                  <span style="color:#bdc3c7">{{ scope.row.timeUnit }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="specification" label="服务规范" align="center" />
            <el-table-column label="启用状态" width="120" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.enabled" active-color="#409eff" inactive-color="#dcdfe6"
                  :disabled="Switchdisable" />
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </main>

    <!-- 分页 -->
    <footer>
      <div class="pagin">
        <el-pagination background :current-page="params.page" :page-sizes="[20, 50, 100, 150]"
          :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </footer>


    <el-dialog title="编辑工单节点配置" :visible.sync="iSdialog" width="50%">
      <el-form inline class="demo-form-inline">
        <el-form-item label="节点名称">
          <el-input v-model="Echo.name1" :disabled="true" />
        </el-form-item>
        <el-form-item label="开始跟进时间" label-width="140px">
          <el-input-number v-model="Echo.delayTime1" :min="0"  :max="24"></el-input-number>
          <el-select v-model="Echo.timeUnit1" class="ml-1" placeholder="">
            <el-option label="小时" value="shanghai"></el-option>
            <el-option label="天" value="beijing"></el-option>
          </el-select>
          <div style="color:chocolate"><i class="el-icon-warning">提示：</i>0为立即跟进</div>
        </el-form-item>
        <el-form-item label="启用状态" label-width="120px">
          <el-switch v-model="Echo.enabled1" active-color="#409eff" inactive-color="#dcdfe6" />
        </el-form-item>
        <el-form-item label="服务规范">
          <el-input type="textarea" v-model="Echo.specification1" :show-word-limit="true" :maxlength="300"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="iSdialog = false">取 消</el-button>
        <el-button type="primary" @click="iSdialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { teacherAPI } from '@/api/adminstare'

/**
* @author        Yng
* @time          2023-11-29 09:08:00  星期三
* @description   工单节点配置
**/


export default {
  name: 'nodesStat',
  data() {
    return {
      tabsVal: '0',
      radio: '全部节点',
      tableData: [],
      total: 0,
      // 开关禁用
      Switchdisable: true,
      iSdialog: false,
      Echo: {name1:'',delayTime1:'',timeUnit1:'',enabled1:'',specification1:''},
      params: {
        action: 'nodeList',
        ep: '',
        page: 1,
        pageSize: 20,
        sortStr: 'id desc',
        type: 'LEARNING_PROCESS',
        enabled: '',
      }
    }
  },
  mounted() {
    this.getWork()
  },
  methods: {
    // 获取工单列表
    async getWork() {
      let { code, data, total } = await teacherAPI(this.params)
      if (!code) {
        data && data.forEach(item => item.timeUnit == 1 ? item.timeUnit = '小时后' : item.timeUnit = '天后');
        this.tableData = data
        this.total = total
      }
    },
    // tabs
    handleTabs() {

    },
    // radio
    changeRadio(label) {
    },
    // 编辑
    handleEdit(val) {
      this.iSdialog = true
      this.Echo.name1 = val.name
      this.Echo.delayTime1 = val.delayTime
      this.Echo.timeUnit1 = val.timeUnit == 1 ? val.timeUnit1 = '小时' : val.timeUnit1 = '天'
      this.Echo.enabled1 = val.enabled
      this.Echo.specification1 = val.specification
    },
    // 一页几条数据
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getWork()
    },
    // 当前页
    handleCurrentChange(val) {
      this.params.page = val
      this.getWork()
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input--suffix {
  width: 100px !important;
}
::v-deep .el-textarea{
  width: 800px;
}
</style>